<template>
    <div class="bi-input-handler">
        <div class="handler">
            <div><bi-icon v-if="icon || loading" class="icon" :data="icon" :loading="loading" ></bi-icon></div>
            <i v-if="clear" class="fa fa-ban clear" title="清空选择" @click.stop="$emit('clear')" ></i>
        </div>
        <input class="form-control" ref="input" :class="[status?'':'is-invalid']"
        :placeholder="placeholder" 
        :disabled="disabled"
        :style = "inputStyle"
        :tabindex="tabindex"
        tabindex="-1"
        readonly
        @focus="focus"
        v-model="valueLabel" />
    </div>
</template>

<script>
export default{
    props:{
        icon:{
            type:String,
            default:''
        },
        loading:{
            type:Boolean,
            default:false
        },
        placeholder:{
            type:String,
            default:''
        },
        status:{
            type:Boolean,
            default:false
        },
        disabled:{
            type:Boolean,
            default:false
        },
        clear:{
            type:Boolean,
            default:false
        },
        label:{
            type:String,
            default:''
        },
        tabindex:{
            type:[Number,String],
            default:''
        }
    },
    emits:['clear'],
    computed:{
        valueLabel(){
            return this.label;
        },
        inputStyle(){
            
            let style =  {};

            style.paddingRight = '30px';

            if (this.icon || this.loading){
                style.paddingLeft = '30px';
            }

            return style;
        }
    },
    methods:{
        focus(){
            this.$refs.input.blur();
        }
    }
}
</script>

<style>
.bi-input-handler{
    position: relative;
}

.bi-input-handler .handler{
    position: absolute;
    z-index: 3;
    top: 0;
    width: 100%;
    height: 100%;
    left: 0;
    background-color:transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bi-input-handler .handler::before{
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    right: 10px;
    top: 50%;
    margin-top: -8px;
    z-index: 1;
    transform:rotate(-45deg);
    border-left: 1px solid #ced4da;
    border-bottom: 1px solid #ced4da;
}

.bi-input-handler .handler .icon{
    margin-left: 10px;
    color: var(--bs-input-icon);
}

.bi-input-handler .handler .clear{
    margin-right: 30px;
    color: #ced4da;
    color: var(	--bs-secondary-color);
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
}

.bi-input-handler .handler .clear:hover{
    color: var(--bs-body-color);
}
</style>